{% extends "_layouts/examples.html" %}
{% block title %}Full width / No sidebar (deprecated){% endblock %}

{% block style %}
<style>
  body {
    margin: 0;
  }
</style>
{% endblock %}

{% block content %}
<a href="#main-content" class="p-link--skip">Jump to main content</a>


<header id="navigation" class="p-navigation is-dark">
  <div class="l-full-width">
    <div class="l-start">
    <div class="p-navigation__banner">
      <div class="p-navigation__tagged-logo">
        <a class="p-navigation__link" href="/docs/examples/layouts/full-width/no-sidebar">
          <div class="p-navigation__logo-tag">
            <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/b36b0862-Vanilla_icon_RGB_2022.svg" alt="Vanilla framework">
          </div>
          <span class="p-navigation__logo-title">Vanilla</span>
        </a>
      </div>
      <ul class="p-navigation__items">
        <li class="p-navigation__item">
          <button class="js-search-button p-navigation__link--search-toggle">
            <span class="p-navigation__search-label">Search</span>
          </button>
        </li>
        <li class="p-navigation__item">
          <button class="js-menu-button p-navigation__link">Menu</button>
        </li>
      </ul>
    </div>
    </div>
    <div class="l-main">
      <div class="p-navigation__row u-fixed-width">
    <nav class="p-navigation__nav" aria-label="Main">
      <ul class="p-navigation__items">
        <li class="p-navigation__item"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Docs</a></li>
        <li class="p-navigation__item "><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Examples</a></li>
        <li class="p-navigation__item"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Accessibility</a></li>
        <li class="p-navigation__item"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Browser support</a></li>
        <li class="p-navigation__item"><a class="p-navigation__link" href="/docs/examples/layouts/full-width/default">Contribute</a></li>
      </ul>
      <ul class="p-navigation__items">
        <li class="p-navigation__item">
          <button class="js-search-button p-navigation__link--search-toggle">
            <span class="p-navigation__search-label">Search</span>
          </button>
        </li>
      </ul>
      <div class="p-navigation__search">
        <form class="p-search-box" action="/docs/search">
          <input type="search" id="search-docs" class="p-search-box__input" name="q"  placeholder="Search the docs" title="Search the documentation"  autocomplete="on" aria-label="Search the docs" required />
          <button type="reset" id="search-docs-reset" class="p-search-box__reset u-no-margin--right" name="close"><i class="p-icon--close">Clear input</i></button>
          <button type="submit" class="p-search-box__button" name="submit"><i class="p-icon--search">Submit</i></button>
        </form>
      </div>
    </nav>
  </div>
  </div>
    <div class="l-end">
    <nav class="p-navigation__nav p-navigation--right" style="width: auto">
      <ul class="p-navigation__items" style="margin-left: auto">
        <li class="p-navigation__item"><a class="p-navigation__link" href="/docs">Login</a></li>
      </ul>
    </nav>
    </div>
  </div>
  <div class="p-navigation__search-overlay"></div>
</header>

<div class="p-strip--highlighted is-shallow l-full-width">
  <div class="l-main">
    <div class="row">
      <div class="col-6 col-medium-3"><h1 class="p-heading--2">Get started</h1></div>
      <div class="col-6 col-medium-3"><p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p></div>
    </div>
  </div>
</div>

<hr />

<div class="p-strip is-shallow l-full-width">
  <div class="l-main">
    <div class="row">
      <div class="col-6 col-medium-3"><h2>Install</h2></div>
      <div class="col-6 col-medium-3">
        <p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p>

        <p>The recommended way to get Vanilla is with <a href="https://www.yarnpkg.com/">yarn</a>:</p>
        <pre><code>yarn add vanilla-framework</code></pre>
        <p>Or <a href="https://www.npmjs.com/">npm</a>:</p>
        <pre><code>npm install vanilla-framework</code></pre>
        <p>This will pull down the latest version into your local <code>node_modules</code> folder and save it into your project's dependencies in <code>package.json</code>.</p>

        <p>You can now reference Vanilla from your main Sass file - note that the path to <code>node_modules</code> might be different for your project:</p>
        <pre><code>// Import the framework
  @import 'node_modules/vanilla-framework';

  // Include all of Vanilla Framework
  @include vanilla;</code></pre>

        <p><em>For information on overriding settings and importing only parts of Vanilla, see <a href="/docs/customising-vanilla">Customising Vanilla</a>.</em></p>

      </div>
    </div>
  </div>
</div>

<div class="l-full-width">
  <div class="l-main">
    <div class="u-fixed-width">
      <hr />
    </div>
  </div>
</div>

<div class="p-strip is-shallow l-full-width">
  <div class="l-main">
    <div class="row">
      <div class="col-6 col-medium-3"><h2>Hotlink</h2></div>
      <div class="col-6 col-medium-3">
        <p>You can add Vanilla directly to your markup:</p>
        <pre><code>&lt;link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-3.8.1.min.css" /&gt;</code></pre>
      </div>
    </div>
  </div>
</div>

<div class="p-strip--highlighted is-shallow l-full-width">
  <div class="l-main">
    <div class="row">
      <div class="col-6 col-medium-3"><h2>Download</h2></div>
      <div class="col-6 col-medium-3">
        <p>Download the latest version of Vanilla from GitHub.</p>
        <p><a class="p-button--positive" href="https://github.com/canonical/vanilla-framework/archive/v3.8.1.zip">Download v3.8.1</a></p>
        <p>See the <a href="https://github.com/canonical/vanilla-framework/releases">release notes</a> for details on the latest updates.</p>
      </div>
    </div>
  </div>
</div>

<div class="p-strip is-shallow l-full-width">
  <div class="l-main">
    <div class="row">
      <div class="col-6 col-medium-3"><h2>Local development</h2></div>
      <div class="col-6 col-medium-3">
        <p>To make improvements to Vanilla itself, please follow the instructions on the project’s <a href="https://github.com/canonical/vanilla-framework#vanilla-framework">README.md</a>.</p>
        <ul class="p-inline-list">
          <li class="p-inline-list__item"><i class="p-list__icon--matrix"></i><a href="https://matrix.to/#/#vanilla:ubuntu.com">Join us on Matrix</a></li>
          <li class="p-inline-list__item"><i class="p-list__icon--github"></i><a href="https://github.com/canonical/vanilla-framework/issues/new">Fork us on GitHub</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

{% endblock %}
